<template>
  <div class="form-container">
    <div class="form-top"></div>
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/articleTypeList' }">文章分类列表</el-breadcrumb-item>
        <el-breadcrumb-item>编辑分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-content">

      <el-form ref="form" :model="form" :rules="rules" label-width="126px">
<!--        <el-form-item label="类型" prop="type_id">-->
<!--          <el-select v-model="form.type" placeholder="通用">-->
<!--            <el-option v-for="item in types" :key="item.id" :label="item.title" :value="item.id"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="父级分类" prop="type_id">
          <el-cascader
            ref="organizerUnit"
            @change="handleParentType"
            :options="articleTypes"
            v-model="form.pid"
            :show-all-levels="false"
            clearable
            :props="{checkStrictly:true,emitPath:false}"
            placeholder="不选择默认为顶级分类"></el-cascader>
        </el-form-item>
        <el-form-item label="名称标题" prop="title">
          <el-input v-model="form.type_name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload
            action="/api/client/base/uploadfile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            ref="upload"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
            :limit="50"
            :headers="myHeaders"
            :file-list="fileList"
            accept="image/jpeg, image/jpg, image/gif, image/png"
            :multiple="false">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

        </el-form-item>
        <el-form-item label="排序">
          <el-col :span="5">
            <el-input v-model="form.sort" placeholder="数字越大越靠后"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-row>
            <el-button type="danger" @click="confirmAdd('form')">立即保存</el-button>
            <el-button type="default" @click="cancel()">返回</el-button>
          </el-row>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        validate: false,
        activeName: 'first',
        articleTypes: [],
        types:[
          {
            id:0,
            title:'通用',
          },{
            id:1,
            title:'装修攻略',
          },
        ],
        form: {
          type:1,
          pid:'',
          type_name: '',
          sort: 0,
        },
        rules: {
          type_name: [
            {required: true, message: '请输入文章标题', trigger: 'blur'},
          ],

        },
        fileList: [],
        dialogImageUrl: "",
        dialogVisible: false,
        myHeaders: {
          'access-token': this.$store.state.token  , //这里重新定义了请求头
          'Authorization': this.$store.state.token ,
          'user-id':this.$store.state.user_id
        },
      }
    },
    mounted() {
      this.loadArticleType();
    },
    methods: {
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handlePictureCardPreview(file) {
        console.log('file',file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file,fileList) {
        console.log('fileList',fileList);
        this.fileList = fileList
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传商品图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      loadArticleType() {
        const id = this.$route.query.id;
        this.$http.get('/api/root/articleType/edit', {id: id})
          .then(rest => {
            rest.data.typeInfo.cover.map(item => {
              this.fileList.push({
                id:item.img_id,
                url:item.image_path
              })
            });
            this.form = {
              ...rest.data.typeInfo
            };
            // this.form.pid = rest.
            this.articleTypes = rest.data.types?rest.data.types:[];
          })
      },
      confirmAdd(form) {
        this.validateFormData(form);
        if (this.validate) {
          const _ths = this;
          if (this.fileList){
            this.fileList.map(item => {
              if (item.response){
                _ths.form.cover = item.response.data.id;
              }else{
                _ths.form.cover = item.id;
              }
            })
          }
          this.$http.post('/api/root/articleType/edit', {...this.form})
            .then(rest => {
              if (rest.msg == 'ok') {
                this.$message.success('修改成功');
                setTimeout(function () {
                  _ths.$router.push({name: 'articleTypeList'})
                }, 800)
              } else {
                this.form = {
                  ...this.form,
                };
                this.$message.error(rest.msg);
              }
            })
        }
      },
      cancel() {
        this.$router.push({name: 'articleTypeList'})
      },

      /**
       * 验证表单数据
       * @param form
       */
      validateFormData(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              message: '表单数据未填写完整,操作失败！',
              type: 'warning'
            });
            return false;
          }
          this.validate = true;
          return true;
        })
      },
      handleParentType(value) {
        this.form.pid = value;
        if (this.$refs.organizerUnit) {
          this.$refs.organizerUnit.dropDownVisible = false
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "index.less";
</style>